<template>
    <div>


        用户名:<input type="text" v-model="can.name">
        <input type="button" value="查询" @click="show">
<table border="1px">
啊啊
<tr>
    <td>等级id</td>
    <td>等级名称</td>
    <td>状态</td>
    <td>操作</td>
</tr>

<tr v-for="item in lists.list">
    <td>{{item.id}}</td>
    <td>{{ item.name }}</td>
    <td>{{item.state==0?"启用":"冻结"}}</td>
    <td><input type="button" value="启用" v-if="item.state==1" @click="upsta(item.id,0)">
        <input type="button" value="冻结" v-if="item.state==0" @click="upsta(item.id,1)"></td>
</tr>
</table>
    </div>
    <div>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(can.index-1)">
        <input type="button" value="下一页" @click="fanye(can.index+1)">
        <input type="button" value="尾页" @click="fanye(lists.pagecount)">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';


const fanye=(i:any)=>{
if(i<1){
can.index=1;
}else if(i>lists.pagecount){
can.index=lists.pagecount
}else{
    can.index=i
}
show();
}

const upsta=(id:any,state:any)=>{
axios({
    url:'https://localhost:7025/api/User/UpState',
params:{id:id,state:state},
method:'put'
})
.then(res=>{
    console.log(res);
    if(res.data>0){
        
        
        alert('修改状态成功');
        show();
    }
    
})
}

let can=reactive({
    index:1,
    size:2,
    name:''
});


let lists:any=reactive({
    list:[],
    count:0,
    pagecount:0
}
);

onMounted(()=>{
    show();
})

const show=()=>{
axios({
    url:'https://localhost:7025/api/User/GetDeng',
    method:'get',
    params:can
})
.then(res=>{
    console.log(res);    
    lists.list=res.data.list;
    lists.count=res.data.count;
    lists.pagecount=res.data.pagecount;
})
}


</script>

<style scoped>

</style>